<template>
  <div class="cuboid" @click="lineClick">
    <!-- 蓝色 -未接入 -->
    <template v-if="visible == 10"> 
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="right"></div>
      <div class="left"></div>
      <div class="front"></div>
      <div class="back"></div>
    </template>
    <!-- 绿色-运行 -->
    <template v-else-if="visible == 1">
      <div class="top1"></div>
      <div class="bottom1"></div>
      <div class="right1"></div>
      <div class="left1"></div>
      <div class="front1"></div>
      <div class="back1"></div>
    </template>
    <!-- 黄色-待机 -->
    <template v-else-if="visible == 3">
      <div class="top2"></div>
      <div class="bottom2"></div>
      <div class="right2"></div>
      <div class="left2"></div>
      <div class="front2"></div>
      <div class="back2"></div>
    </template>
    <!-- 红色-报警 -->
    <template v-else-if="visible == 2">
      <div class="top3"></div>
      <div class="bottom3"></div>
      <div class="right3"></div>
      <div class="left3"></div>
      <div class="front3"></div>
      <div class="back3"></div>
    </template>
    <!-- 灰色-停机 -->
    <template v-else-if="visible == 0">
      <div class="top4"></div>
      <div class="bottom4"></div>
      <div class="right4"></div>
      <div class="left4"></div>
      <div class="front4"></div>
      <div class="back4"></div>
    </template>
    <!-- 蓝色-为获取到状态显示 -->
    <template v-else> 
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="right"></div>
      <div class="left"></div>
      <div class="front"></div>
      <div class="back"></div>
    </template>
  </div>
</template>

<script>
// 1运行 绿色 待机 黄色 2报警 红色 0停机 灰色 10未接入 蓝色
export default {
  name: "BackToTop",
  props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    visible:{
      type: String,
      default: '10'
    },
    lineInfo:{
      type: Object
    }
  },
  data() {
    return {
      // visible: 1,  
    };
  },
  computed:{},
  // watch: {
  //   visible: {
  //     handler(nVal, oVal) {
  //       console.log(nVal, oVal)
  //     },
  //     deep: true
  //   }
  // },
  mounted() {},
  beforeDestroy() {},
  methods: {
    lineClick(){
      // this.$router.push({ path: 'kanban1', query: {} });
      this.$emit('lineClickEvt', this.lineInfo)
    }
  }
};
</script>

<style scoped>
.cuboid {
  width: 20px;
  height: 20px;
  display: inline-block;
  transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */
  transform: rotateX(-20deg) rotateY(100deg);
}
.cuboid:hover {
  transform: rotateX(-20deg) rotateY(100deg) scale(1.5);
  /* background-color: #4ffaff; */
}
.cuboid div {
  /* width: 20px; */
  position: absolute;
  /* 半透明效果方便查看绘制情况 */
  /* opacity: 0.5; */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 默认颜色-蓝色 */
.front {
  width: 12px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #114e78; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(0deg) translateZ(60px);
}
.back {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 15px #0097fe;
  border-top: 1px solid #4ffaff;
  border-right: 1px solid #4ffaff;
  transform: rotateY(180deg) translateZ(60px);
}
.top {
  width: 12px;
  height: 120px;
  box-shadow: inset 0 0 15px #0097fe;
  /* border: 1px solid #0097fe; */
  transform: rotateX(90deg) translateZ(60px);
}
.bottom {
  width: 12px;
  height: 120px;
  /* box-shadow: inset 0 0 15px #0097fe; */
  /* border: 1px solid #4ffaff; */
  transform: rotateX(-90deg) translateZ(-40px);
}
.left {
  width: 120px;
  height: 12px;
  box-shadow: inset 0 0 15px #0097fe;
  border-top: 1px solid #4ffaff;
  transform: rotateY(-90deg) translateZ(60px);
}
.right {
  width: 120px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #112545; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(90deg) translateZ(-40px);
}

/* 运行-绿色 */
.front1 {
  width: 12px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #22ed7c; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(0deg) translateZ(60px);
}
.back1 {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 15px #20e97e;
  border-top: 1px solid #4ffaff;
  border-right: 1px solid #4ffaff;
  transform: rotateY(180deg) translateZ(60px);
}
.top1 {
  width: 12px;
  height: 120px;
  box-shadow: inset 0 0 15px #20e97e;
  /* border: 1px solid #0097fe; */
  transform: rotateX(90deg) translateZ(60px);
}
.bottom1 {
  width: 12px;
  height: 120px;
  /* box-shadow: inset 0 0 15px #20e97e; */
  /* border: 1px solid #4ffaff; */
  transform: rotateX(-90deg) translateZ(-40px);
}
.left1 {
  width: 120px;
  height: 12px;
  box-shadow: inset 0 0 15px #20e97e;
  border-top: 1px solid #4ffaff;
  transform: rotateY(-90deg) translateZ(60px);
}
.right1 {
  width: 120px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #45a776; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(90deg) translateZ(-40px);
}
/* 待机-黄色 */
.front2 {
  width: 12px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #ffa235; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(0deg) translateZ(60px);
}
.back2 {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 15px #fad259;
  border-top: 1px solid #f7f3cf;
  border-right: 1px solid #f7f3cf;
  transform: rotateY(180deg) translateZ(60px);
}
.top2 {
  width: 12px;
  height: 120px;
  box-shadow: inset 0 0 15px #fad259;
  /* border: 1px solid #fad259; */
  transform: rotateX(90deg) translateZ(60px);
}
.bottom2 {
  width: 12px;
  height: 120px;
  /* box-shadow: inset 0 0 15px #fad259; */
  /* border: 1px solid #4ffaff; */
  transform: rotateX(-90deg) translateZ(-40px);
}
.left2 {
  width: 120px;
  height: 12px;
  box-shadow: inset 0 0 15px #ffa235;
  border-top: 1px solid #f7f3cf;
  transform: rotateY(-90deg) translateZ(60px);
}
.right2 {
  width: 120px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #fad259; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(90deg) translateZ(-40px);
}
/* 报警-红色 */
.front3 {
  width: 12px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #e75840; */
  /* border-right: 1px solid #b45140; */
  transform: rotateY(0deg) translateZ(60px);
}
.back3 {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 15px #f53634;
  border-top: 1px solid #edc0b2;
  border-right: 1px solid #edc0b2;
  transform: rotateY(180deg) translateZ(60px);
}
.top3 {
  width: 12px;
  height: 120px;
  box-shadow: inset 0 0 15px #f53634;
  /* border: 1px solid #f53634; */
  transform: rotateX(90deg) translateZ(60px);
}
.bottom3 {
  width: 12px;
  height: 120px;
  /* box-shadow: inset 0 0 15px #f53634; */
  /* border: 1px solid #4ffaff; */
  transform: rotateX(-90deg) translateZ(-40px);
}
.left3 {
  width: 120px;
  height: 12px;
  box-shadow: inset 0 0 15px #f53634;
  border-top: 1px solid #edc0b2;
  transform: rotateY(-90deg) translateZ(60px);
}
.right3 {
  width: 120px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #e75840; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(90deg) translateZ(-40px);
}
/* 停机-灰色 */
.front4 {
  width: 12px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #656565; */
  /* border-right: 1px solid #645d5d; */
  transform: rotateY(0deg) translateZ(60px);
}
.back4 {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 15px #898989;
  border-top: 1px solid #c2bebe;
  border-right: 1px solid #c2bebe;
  transform: rotateY(180deg) translateZ(60px);
}
.top4 {
  width: 12px;
  height: 120px;
  box-shadow: inset 0 0 15px #898989;
  /* border: 1px solid #898989; */
  transform: rotateX(90deg) translateZ(60px);
}
.bottom4 {
  width: 12px;
  height: 120px;
  /* box-shadow: inset 0 0 15px #898989; */
  /* border: 1px solid #4ffaff; */
  transform: rotateX(-90deg) translateZ(-40px);
}
.left4 {
  width: 120px;
  height: 12px;
  box-shadow: inset 0 0 15px #656565;
  border-top: 1px solid #c2bebe;
  transform: rotateY(-90deg) translateZ(60px);
}
.right4 {
  width: 120px;
  height: 12px;
  /* box-shadow: inset 0 0 15px #656565; */
  /* border: 1px solid #4ffaff; */
  transform: rotateY(90deg) translateZ(-40px);
}
</style>
